<template>
<div class="hbl-fa">	
	    <br><br><br><br><br><br>	
		<div class="hbl-comm">
			<div class="comment" :style="{width:commentWidth}">
				<el-input
				  @focus="showButton(0)"
				  type="textarea"
				  :autosize="{ minRows: minRows, maxRows: maxRows}"
				  :placeholder=placeholder
				  v-model="comment">
				</el-input>
            <div class="publish publish-btn">
		        <button class="btn" @click="doSendComment()">发送</button>
		        <button @click="cancel(0)" class="btn btn-cancel">取消</button>
		    </div>
		   </div>
	   </div>



<el-card class="box-card">
  <div slot="header" class="clearfix">
    <span>评论列表</span>
  </div>
  <div v-for="(value,i) in this.commentList" :key="i" class="text item">
    <p>用户：</p>{{value.username}} <br> <p>评论：</p>{{value.comment}} <br><br>
  </div>
</el-card>

</div>
</template>

<script>
import axios from 'axios'
export default {
  props:{
	  	placeholder:{
	  		type:String,
	  		default:'在此输入评论内容...'
		  },

	  	minRows:{
	  		type:Number,
	  		default:4
	  	},
	  	maxRows:{
	  		type:Number,
	  		default:8
	  	},
        commentWidth:{
       	type:String,
       	default:'80%',
		   },
		  
		username:{
	  		type:String,
	  		default:'健身小白'
		},
		
		comment:{
	  		type:String,
	  		default:'健身要坚持到底啊！'
		},

        muscleId:{
	  		    type: Number,
	  		    default:100
		},
		
		userId:{
	  		    type: Number,
	  		    default:100
		}

	  },	
    data () {
        return {
		  //commentList:[]
		commentNum:{
	  	    	type:Number,
	  		    default:0
		},

        commentList:{
	  		      type:Array,
				      default: () => [
					        {
                      muscleId: 1,
                      userId: 100,
                      commentId: 100,
                      content: '健身贵在坚持',
                  },]
	  	    }
        }
    },

  mounted () {
    var param = new URLSearchParams()
    param.append('muscleId', this.$route.query.imgid)
    // this.commentList=[{"comment":"我练不好啊","username":"hsy"},{"comment":"我也练不好...","username":"hwk"}]
    let that = this
    axios({
      method: 'post',
      url: 'http://localhost:8080/muscle/getComment',
      data: param,
      withCredentials: true
    }).then((response) => {
      //console.log(response.data.user)
      console.log(that.commentList)
      //alert(JSON.stringify(response.data.user))
      //console.log(JSON.stringify(response.data.user))
        // 遍历评论列表
      that.commentList = JSON.parse(JSON.stringify(response.data.user))
			console.log(that.commentList)
       // alert(JSON.stringify(response.data.user))
      // for (let values of response.data.user) {
      //    that.commentList.userId = values[that.commentNum].username
      //    that.commentList.content = values[that.commentNum].comment
      //    that.commentNum++
      //  }
    }).catch((error) => {
      console.log(error)
    })
  },

  components: {

  },
  
  methods: {
    showButton(index){
		    		//this.showFlag = true;
		    		console.log(index+"index");
		    		this.$set(this.buttonMap,index,true)
		    	},
		cancel(index){
		    		this.$set(this.buttonMap,index,false)
		    		if(index!==0){
		    			this.$set(this.replyMap,index,false)
		    		}
		    		console.log(index+"index");
		    		//this.showFlag = false;
		      },
    doSendComment () {
      const token = sessionStorage.getItem('userId')
      if (!token) this.$alert('您还没有登录呢！')
      else{
			this.$emit("doSendComment",this.comment);
			 var param = new URLSearchParams()
      param.append('comment', this.comment)
			param.append('userId', parseInt(sessionStorage.getItem('userId')))
			param.append('muscleId', this.$route.query.imgid)
      let params = {
        'comment': this.comment, //评论内容
        'userId': parseInt(sessionStorage.getItem('userId')), // 用户id
        'muscleId': this.$route.query.imgid // 肌肉id
      }
      axios({
          method: 'post',
          url: 'http://localhost:8080/muscle/makeComment',
          data: param,
          withCredentials: true
        }).then((response) => {
          console.log(response.data)
					// 增加新评论的内容
					alert('发送评论成功')
					location.reload()
      }).catch((error) => {
				 console.log(error)
				 alert('发送评论失败')
      })
    }
      this.$set(this.comment,0,'')
    }
  }
}
</script>

<style type="text/css" scoped>
	.comment{
		display: inline-block;
		margin-left: 10%;
        margin-right: 10%;
	}
	.comment-avatar{
		display: inline-block;
		vertical-align:top;
	}
	.publish{
		margin-top: 10px;
		display: inline-block;
		vertical-align:top;	
	}
	.publish-btn{
		float: right;
	}
	.btn{
	width: 70px; /* 宽度 */
	margin-top: 3px;
	height: 30px; /* 高度 */
	border-width: 0px; /* 边框宽度 */
	border-radius: 3px; /* 边框半径 */
	background: #3CB371; /* 背景颜色 */
	cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
	outline: none; /* 不显示轮廓线 */
	font-family: Microsoft YaHei; /* 设置字体 */
	color: white; /* 字体颜色 */
	font-size: 13px; /* 字体大小 */
	text-align: center;
	line-height: 30px;
	border-radius:5px;
	display: inline-block;
	margin-left: 5px;
	margin-right: 5px;
	}
	.btn-cancel{
		background:grey; /* 背景颜色 */
	}

	.tmsgBox{
    position: relative;
    background: #fff;
    padding:15px;
    margin-bottom: 20px;
    border-radius: 5px;
}
.tmsg-respond h3{
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 8px;
}
.tmsg-respond h3 small{
    font-size: smaller;
    cursor: pointer;
}
.tmsg-respond textarea{
    background:#f4f6f7;
    height:100px;
    margin-bottom: 10px;
}

/*用户输入表单*/
.tmsg-r-info{
    margin:10px 0;
}
.tmsg-r-info input{
    height:30px;
    border-radius: 4px;
    background: #f4f6f7;
}
.tmsg-r-info .info-submit{
    margin: 10px 0;
    text-align: center;
}
.tmsg-r-info .info-submit p,.tmsg-commentshow h1{
    /*background: #97dffd;*/
    color:#fff;
    border-radius: 5px;
    cursor: pointer;
    /*transition: all .3s ease-in-out;*/
    height:30px;
    line-height: 30px;
    text-align: center;
}
/*.tmsg-r-info .info-submit p:hover{
    background: #47456d;
}*/
/*评论列表*/
.tmsg-comments .tmsg-comments-tip{
    display: block;
    border-left: 2px solid #363d4c;
    padding: 0 10px;
    margin: 40px 0;
    font-size: 20px;
}
.tmsg-commentlist {
    margin-bottom:20px;

}
.tmsg-commentshow>.tmsg-commentlist{
    border-bottom: 1px solid #e5eaed;
}
.tmsg-c-item{
    border-top: 1px solid #e5eaed;
}
.tmsg-c-item article{
    margin:20px 0;
}
.tmsg-c-item article header{
    margin-bottom:10px;
}
.tmsg-c-item article header img{
    width: 65px;
    height: 65px;
    border-radius: 50%;
    float: left;
    transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    margin-right: 15px;
    object-fit: cover;
}
.tmsg-c-item article header img:hover{
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
}
.tmsg-c-item article header .i-name{
    font-size: 14px;
    margin:5px 8px 7px 0;
    color:#444;
    font-weight: bold;
    display: inline-block;
}
.tmsg-c-item article header .i-class{
    display: inline-block;
    margin-left:10px;
    background: #dff0d8;
    color:#3c763d;
    border-radius: 5px;
    padding: 3px 6px;
    font-size: 12px;
    font-weight: 400;
}
.tmsg-c-item article header .i-time{
    color:#aaa;
    font-size: 12px;
}
.tmsg-c-item article section{
    margin-left: 80px;
}
.tmsg-c-item article section p img{
    vertical-align: middle;
}
.tmsg-c-item article section .tmsg-replay{
    margin:10px 0;
    font-size: 12px;
    color:#64609E;
    cursor: pointer;
}
.hbl-owo{
	text-align: left;
}
.comm{
		padding: 20px;
	}
	.su{
		margin-top: 2px;
		width: 5px;
		height: 23px;
		background:#3CB371; 	/*#1E90FF*/
	}
	.com-rep{
		display: inline-block;
		vertical-align:top;	
	}
	.com-title{
		font-size: 20px;
		margin-left: 5px;
	}
	.com-span{
		font-size: 16px;
	}
	.hbl-fa{
		text-align: left;
	}
	.hbl-comm{
		padding: 40px;
	}

	.reply{
		border-top: solid 1px #D9D9D9;
	}
	.content{
		margin-top: 20px;
		margin-bottom: 20px;
	}
	.comment-f{
		display: inline-block;
		vertical-align: top;
	}
	.nickname{
		font-size: 14px;
	}
	.author{
		display: inline-block;
	}
	.icon{
		background: #dff0d8;
		color: #3c763d;
		border-radius: 5px;
		padding: 3px 6px;
		font-size: 12px;
		font-weight: 400px;
	}
	.date{
		font-size: 12px;
		margin-top: 5px;
		color: grey;
	}
	.reply-content{
		word-wrap : break-word ;
		width: 90%;
		font-size: 15px;
		line-height: 25px;
		margin-left: 56px;
	}

	.reply-fa{
		margin-top: 5px;
	}
	.reply-font{
		margin-bottom: 5px;
		color: grey;
		cursor: pointer;
	}
	.children{
		padding-left: 40px;
	}
	.cc{
		display: inline-block;
	}
	.cc-to a{
		text-decoration:none; 
		color: #409eff;
	}
	.icon-reply{
		display: inline-block;
		vertical-align: top;

	}

	.icon-hf{
		margin-top: 2px;
	}
	.hbl-child{
		padding: 20px;
	}

  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .article {
    left: 200px;
  }
  .box-card {
    margin-left: 20%;
    margin-right: 20%;
    left: 200px;
  }

</style>